<template>
	<view class="record">
		<view class="nav">
			<view class="back" @click="headleBack">
				<image src="/static/image/backhei.png"></image>
				<view>返回</view>
			</view>
			<view class="title">报名记录</view>
			<view class="english">Registration record</view>
		</view>
		<view class="container">
			<view class="item" v-for="(item,index) in recordList" :key="index"
				@click="headlenavResult(item.match_state,item.phase)">
				<view class="header">
					<view class="periods">
						<view>{{item.phase}}期</view>
						<view>{{item.announce_time}}公布匹配</view>
					</view>
					<view class="rank">
						<image
							:src="item.match_type===1?'../../static/image/common.png':item.match_type===2?'../../static/image/advanced.png':'../../static/image/precedence.png'">
						</image>
						<view>{{item.match_type===1?"普通":item.match_type===2?'高级':'优先'}}匹配</view>
					</view>
				</view>
				<view class="content">
					<view class="resule">
						<image
							:src="item.match_state===0?'../../static/image/wicon.png':item.match_state===1?'../../static/image/success.png':'../../static/image/error.png'">
						</image>
						<view>{{item.match_state===0?"未产生匹配结果":item.match_state===1?'匹配成功':'匹配失败'}}</view>
					</view>
					<view class="time">
						<view>报名时间：{{item.regis_time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [], //报名记录数据列表
				pageNum: 1, //当前页码值
				nextPage: null //判断是否有下一页
			}
		},

		onLoad() {
			this.getRecordList()
		},

		onReachBottom() {
			if (this.nextPage !== null) {
				this.pageNum += 1
				this.getRecordList()
			}
		},

		methods: {
			// 获取报名记录列表
			getRecordList() {
				this.$myRequesy({
					url: 'user/regis-infos',
					data: {
						page: this.pageNum
					}
				}).then(res => {
					if (res.code === 0) {
						this.recordList = [...this.recordList, ...res.data]
						this.nextPage = res.next_url
					}
				})
			},

			//返回上一页
			headleBack() {
				uni.navigateBack()
			},
			//跳转到结果页
			headlenavResult(state, phase) {
				if (!state) {
					uni.showToast({
						title: "正在匹配中...",
						icon: 'loading'
					})
				} else {
					uni.navigateTo({
						url: '/pages/results/results?phase=' + phase
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		.nav {
			width: 100%;
			height: 270upx;
			background-color: rgba(248, 247, 254, 100);
			padding: 40upx;

			.back {
				display: flex;
				margin-bottom: 60upx;
				color: rgba(0, 0, 0, 0.8);
				font-size: 26upx;

				image {
					width: 36upx;
					height: 36upx;
					margin-right: 2upx;
				}
			}

			.title {
				color: rgba(0, 0, 0, 0.8);
				font-size: 36upx;
				font-weight: 600;
				margin-bottom: 10upx;
			}

			.english {
				color: rgba(0, 0, 0, 0.35);
				font-size: 24upx;
			}
		}

		.container {
			padding: 40upx 30upx 124upx;

			.item {
				width: 690upx;
				height: 280upx;
				border-radius: 20upx;
				// background-color: rgba(255, 255, 255, 100);
				box-shadow: 0px 10upx 24upx 0px rgba(246, 244, 255, 100);
				border: 2upx solid rgba(246, 244, 255, 100);
				margin-bottom: 30upx;
				box-sizing: border-box;

				.header {
					padding: 40upx 40upx 34upx 40upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2upx solid rgba(246, 244, 255, 100);

					.periods {
						display: flex;
						color: rgba(0, 0, 0, 0.35);
						font-size: 26upx;

						view:first-child {
							margin-right: 20upx;
							color: rgba(130, 113, 239, 100);
						}

					}

					.rank {
						display: flex;
						color: rgba(16, 16, 16, 100);
						font-size: 26upx;

						image {
							width: 36upx;
							height: 36upx;
							margin-right: 6upx;
						}
					}
				}

				.content {
					padding: 40upx;

					.resule {
						display: flex;
						color: rgba(0, 0, 0, 0.8);
						font-size: 30upx;
						margin-bottom: 10upx;
						font-weight: 600;

						image {
							width: 42upx;
							height: 42upx;
							margin-right: 4upx;
						}
					}

					.time {
						color: rgba(0, 0, 0, 0.35);
						font-size: 26upx;
					}
				}
			}
		}
	}
</style>
